<template>
  <div class="bigData">
    <!-- 左边 -->
    <div class="left">
      <el-tabs v-model="modelName" :before-leave="beforeChange">
        <el-tab-pane label="组件列表" name="first">
          <Widgets :widgets="widgetsData" @onWidgetMouseDown="onWidgetMouseDown"></Widgets>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 中间 -->
    <div class="center">
      <!-- 操作间 -->
      <div class="panle"
        :style="dataInfo.bgImg !== '' ? { background: 'url(' + dataInfo.bgImg + ')', backgroundSize: 'cover', backgroundPosition: 'center center' } : ''">
        <div class="view" @click.stop @click.prevent @drop="onDrop" @dragover="dragOver">
          <VueDragResizezble class="item" ref="widget" v-for="(item, index) in modelList" :key="index"
            :w="item.style.w == '' || item.style.w < 10 ? 10 : parseInt(item.style.w / 4 * 3)" :x="item.style.x"
            :h="item.style.h == '' || item.style.h < 10 ? 10 : parseInt(item.style.h / 4 * 3)" :y="item.style.y"
            :resizable="isResizable" :active="false" :maxWidth="1133" :parent="true" :debug="false" :snap="true"
            :snapTolerance="5" @dragging="onDragging" @resizing="onResize" @refLineParams="getRefLineParams"
            @activated="selectType(item)">
            <!-- 组件列表 -->
            <ChartList :com="item.com" :widgetData="item"></ChartList>
            <!-- 删除 -->
            <i @mousedown.stop.prevent="deleteItem($event, index)" class="el-icon-error"></i>
          </VueDragResizezble>

          <!--辅助线START-->
          <span class="ref-line v-line" v-for="(item, idx1) in vLine" :key="idx1 + 'a'" v-show="item.display"
            :style="{ left: item.position, top: item.origin, height: item.lineLength }">
          </span>
          <span class="ref-line h-line" v-for="(item, idx2) in hLine" :key="idx2 + 'b'" v-show="item.display"
            :style="{ top: item.position, left: item.origin, width: item.lineLength }">
          </span>
          <!--辅助线END-->
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <el-tabs v-model="activeName">
        <el-tab-pane label="大屏配置" name="first">
          <BigDataInfo :dataInfo="dataInfo"></BigDataInfo>
        </el-tab-pane>
        <el-tab-pane v-if="isRight" label="组件设置" name="second">
          <ChartAttrList :attrData="attrData"></ChartAttrList>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 拖拽插件
import VueDragResizezble from '@/commont/plugins/draggable/vue-draggable-resizable';
import '@/commont/plugins/draggable/vue-draggable-resizable.css';

//图表集合
import Widgets from '@/components/bigData/widgets.vue';
import ChartList from '@/components/bigData/chartList.vue';
import ChartAttrList from '@/components/bigData/chartAttrList.vue';
import BigDataInfo from '@/views/bigData/bigDataInfo.vue';

// 静态配置
import { widgetConfig } from '@/commont/constants/dataConfig';
let widgetX = 0;//当前组件的x位置
let widgetY = 0;//当前组件的y位置
let currentWidget = null;//当前组件

export default {
  components: { VueDragResizezble, Widgets, ChartList, BigDataInfo, ChartAttrList },
  props: {},
  computed: {},
  data() {
    return {
      propsFun: null,
      /****** 左边组件列表 ******/
      modelName: "first",
      widgetsData: widgetConfig,

      /****** 中间模板信息 ******/
      modelList: [],
      vLine: [],
      hLine: [],
      isResizable: true,//小组件 是否拖拽

      /****** 右边属性值 ******/
      dataInfo: {
        dataName: '',//大屏名称
        dataType: '',//大屏类型
        bgImg: require('../../assets/modelBg.png')//背景图
      },
      activeName: "first",
      isRight: false,
      attrData: {},//属性值

    }
  },
  watch: {},
  created() { },
  mounted() { },
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { },
  methods: {
    /*********** 左侧 *************/
    // 左边组件切换
    beforeChange(name) {
      if (name == 'first') {
        this.isRight = false;
        this.activeName = "first";
      } else if (name == 'second') {
        this.isCustomData = false;
        this.activeName = "first";
      }
    },
    // 鼠标按下组件事件
    onWidgetMouseDown(e, widget) {
      widgetX = e.offsetX;
      widgetY = e.offsetY;
      currentWidget = widget;
    },

    /*********** 中间 *************/
    // 阻止默认事件
    dragOver(e) {
      e.preventDefault();//阻止默认事件
      e.stopPropagation();//阻止事件冒泡
    },
    // 组件缩放调整大小
    onResize(x, y, w, h) {
      this.attrData.style.w = parseInt(w / 3 * 4);
      this.attrData.style.h = parseInt(h / 3 * 4);
      this.attrData.style.x = x;
      this.attrData.style.y = y;
    },
    // 组件拖动时的位置
    onDragging(x, y) {
      this.attrData.style.x = x;
      this.attrData.style.y = y;
    },
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },
    // 拖放结束
    onDrop(e) {
      currentWidget.default.value = [];
      // 小组件
      if (this.modelName != 'second') {
        // 特殊
        if (currentWidget.type == 'title') { //标题
          currentWidget.default.value = { title: '', bgImg: '' };
        } else if (currentWidget.type == 'news') { //新闻
          currentWidget.default.value = {
            title: '', bgImg: '', newsData: [
              { text: '' }
            ]
          }
        } else if (currentWidget.type == 'list') { //列表
          currentWidget.default.value = {
            title: '', bgImg: '', listData: {
              columns: [
                { title: '', prop: 'name', align: 'center' },
              ],
              data: []
            }
          }
        } else if (currentWidget.type == 'count') { //统计图
          currentWidget.default.value = {
            title: '', bgImg: '', countData: [
              { label: '', value: '', unit: '', img: '' }
            ]
          }
        }
        //其他
        else {
          currentWidget.default.value = {
            title: '', bgImg: '', chartData: {
              xData: ['test1', 'test2', 'test3', 'test4', 'test5',],
              yData1: [30, 40, 50, 60, 70,],
              yData2: [20, 40, 60, 80, 100,],
              yData3: [10, 30, 50, 70, 90,],
            }
          }
        }
        this.modelList.push({
          type: currentWidget.type,
          label: currentWidget.label,
          com: currentWidget.com,
          style: {
            x: e.offsetX - widgetX,
            y: e.offsetY - widgetY,
            w: currentWidget.default.w,
            h: currentWidget.default.h,
          },
          value: currentWidget.default.value,
        })
      }
      console.log("模板组件：", this.modelList);
    },
    // 展示模板信息
    showModelInfo() {
      this.activeName = "first";
      this.isRight = false;
      this.attrData = {};
      this.customData = {};
    },
    // 展示右边组件操作数据
    selectType(item) {
      if (item.type == 'title' || item.type == 'news' || item.type == 'list' || item.type == 'count') {
        this.isResizable = true;
      } else {
        this.isResizable = false;
      }
      this.isRight = false;
      this.attrData = item;
      this.activeName = 'second';
      console.log('小组件属性值', this.attrData);
      this.$nextTick(() => this.isRight = true);
    },
    // 删除组件
    deleteItem(e, index) {
      e.preventDefault();
      e.stopPropagation();
      this.modelList.splice(index, 1);
      this.activeName = "first";
      this.isRight = false;
      this.attrData = {};
    },

    /*********** 右侧 *************/

  },
}
</script>

<style lang="scss" scoped>
.bigData {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  padding: 15px 15px 0 15px;
  background-color: #FFFFFF;
  display: flex;

  // 左边小组件
  .left {
    width: 260px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0px 2px 8px 0px #ccc;
  }

  // 中间面板
  .center {
    width: calc(100% - 685px);
    height: 100%;
    margin: 0 15px;
    box-shadow: 0px 2px 8px 0px #ccc;
    position: relative;

    .panle {
      margin-top: 42px;
      height: calc(100% - 42px);
      background: linear-gradient(-90deg, rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
      padding: 10px 15px;
      display: flex;
      justify-content: center;

      .view {
        width: 950px;
        height: 100%;
        border: 1px solid blue;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;

        .item {
          &:hover {
            cursor: pointer;
            transform: scale(0.99);
            border-radius: 2px;
            box-shadow: 0 0 3px #afafaf;

            .el-icon-error {
              display: block;
            }
          }

          .el-icon-error {
            position: absolute;
            right: -10px;
            top: -6px;
            color: red;
            font-size: 25px;
            cursor: pointer;
            display: none;
            z-index: 9999;
          }
        }
      }
    }
  }

  // 右边属性
  .right {
    width: 400px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0px 2px 8px 0px #ccc;
  }
}
</style>